<template>
    <div class="app-set-sidebarSet">
        <div class="setting-panel">
            <div class="sidebar-main flex-around" mt10 mb12>
                <div class="sidebar-main-left" :class="{ 'position-select': fixed == 'left' }"
                    @click="handleSelectFixed('left')">
                    <div class="position-left"></div>
                </div>
                <div class="sidebar-main-right" :class="{ 'position-select': fixed == 'right' }"
                    @click="handleSelectFixed('right')">
                    <div class="position-right"></div>
                </div>
            </div>
            <div class="sidebar-position flex-around">
                <div class="left-btn">
                    <span :class="{ 'btn-select': fixed == 'left' }" @click="handleSelectFixed('left')">左侧</span>
                </div>
                <div class="right-btn">
                    <span :class="{ 'btn-select': fixed == 'right' }" @click="handleSelectFixed('right')">右侧</span>
                </div>
            </div>
            <hr mt20 mb10 />
            <div class="sidebar-autoHide flex-x flex-between">
                <label>自动隐藏</label>
                <el-switch size="small" v-model="sideBarHide"></el-switch>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <label>记住上次分组</label>
                <el-switch size="small"></el-switch>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <label class="slider-title">透明度</label>
                <el-slider v-model="sideBarOpacity" size="small" show-input :min="0.1" :max="1" :step="0.01"/>
                <span>%</span>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <label class="slider-title">宽度</label>
                <el-slider v-model="sidebarWidth" size="small" show-input :min="42" :max="120"/>
                <span>px</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/module/global';

const globalStore = useGlobalStore()
const fixed = computed(() => globalStore.sidebar.fixed)

const sidebarWidth = ref(globalStore.sidebar.width)
const sideBarOpacity = ref(globalStore.sidebar.sideBarOpacity)
const sideBarHide = ref(globalStore.sidebar.isHide)

const handleSelectFixed = (val: 'left' | 'right') => {
    globalStore.setSidebarFixed(val)
}


watchEffect(() => {
    globalStore.setSidebarOpacity(sideBarOpacity.value)
    globalStore.setSidebarWidth(sidebarWidth.value)
    globalStore.setSidebarHide(sideBarHide.value)
})
</script>

<style scoped lang="scss">
.app-set-sidebarSet {
    .sidebar-main {

        &-left,
        &-right {
            width: 44%;
            height: 70px;
            background-color: rgba(var(--alpha-color), .06);
            border-radius: 4px;
            border: 1px solid transparent;
            position: relative;

            .position-left,
            .position-right {
                position: absolute;
                top: 0;
                height: 100%;
                width: 10px;
                background-color: rgba(var(--alpha-color), .1);

                &::before {
                    content: '';
                    width: 6px;
                    height: 6px;
                    top: 10px;
                    left: 2px;
                    border-radius: 50%;
                    position: absolute;
                    background-color: rgba(var(--alpha-color), .5);
                }

                &::after {
                    content: '';
                    width: 6px;
                    height: 2px;
                    top: 26px;
                    left: 2px;
                    border-radius: 2px;
                    position: absolute;
                    background-color: rgba(var(--alpha-color), .3);
                    box-shadow: 0 10px 0 0 rgba(var(--alpha-color), .3), 0 20px 0 0 rgba(var(--alpha-color), .3);
                }
            }

            .position-left {
                left: 0;
            }

            .position-right {
                right: 0;
            }
        }

        .position-select {
            border: 2px solid var(--primary-color);
        }

    }


    .sidebar-position {
        text-align: center;

        .left-btn,
        .right-btn {
            width: 44%;

            span {
                display: block;
                width: 50px;
                height: 24px;
                border-radius: 12px;
                line-height: 24px;
                margin: 0 auto;
                cursor: pointer;
            }

            .btn-select {
                background-color: var(--primary-color);
                color: $color-white;
            }
        }
    }
}
</style>